The Document Object Model and JavaScript > Custom JavaScript controls > Tree controls |
![]() ![]() ![]() |
The tree control displays data in a hierarchical format and allows users to expand and collapse views of the data. The data is stored in the tree in a collection of "data nodes." Data nodes may contain other data nodes, referred to as "child nodes." Nodes at the extreme reaches of the tree are referred to as "leaf nodes." Leaf nodes, by definition, contain no child nodes of their own. The first node in the tree is referred to as the "root" node.
In Dreamweaver, the Keyboard Shortcuts editor uses the tree control:
Clicking on a node once selects it. In Windows, the node buttons are +/- buttons. On the Macintosh, the nodes are turn-down triangles. Nodes that contain child nodes are expandable and collapsible by clicking on the associated button next to the node.
A tree control uses three new tags (Dreamweaver uses the MM:
prefix to distinguish the tag from standard HTML):
![]() |
MM:TREECONTROL indicates to Dreamweaver that the form element is a tree control. |
![]() |
MM:TREECOLUMN specifies a column in the tree control. |
![]() |
MM:TREENODE specifies one node in the tree control. |
MM:TREECONTROL The MM:TREECONTROL
tag is a new HTML element that the user can specify in an extension document to instantiate a tree control. The tag has several attributes, properties, events, and methods.
Although the MM:TREECONTROL
tag is non-empty, it may not contain raw text. The only valid content for an MM:TREECONTROL
tag is at least one or more MM:TREECOLUMN
tags and zero or more MM:TREENODE
tags.
The HTML attributes for an MM:TREECONTROL
tag are:
Attribute Name | Description | Sample |
---|---|---|
name |
Name of the tree control. |
<MM:TREECONTROL name="MyTree"> </MM:TREECONTROL> |
size |
Number of rows to size the control for. (optional) Default is 5 rows. |
<MM:TREECONTROL size="6"> </MM:TREECONTROL> |
multiple |
Allows a tree to have multiple selections. Default is single-selection. (optional) |
<MM:TREECONTROL MULTIPLE> </MM:TREECONTROL> |
style |
Style definition for height and width of tree control. If specified, takes precedence over SIZE attribute. (optional) |
<MM:TREECONTROL style="width:100px;height:200px"> </MM:TREECONTROL> |
noheaders |
Indicates that the tree column headers won't be displayed if this attribute is present. |
<MM:TREECONTROL noheaders"> </MM:TREECONTROL> |
MM:TREECOLUMN The MM:TREECOLUMN
tag specifies a column in the tree control. You must sepcify at least one MM:TREECOLUMN
tag.
The syntax for an MM:TREECOLUMN
tag is:
Attribute Name | Description | Sample |
---|---|---|
name |
Name of the column. |
<MM:TREECOLUMN name="Column1"> |
value |
String to appear in column header. |
<MM:TREECOLUMN value="Files"> |
width |
Width of the column, in pixels. Percentage not supported. Default is 100. |
<MM:TREECOLUMN width="60"> |
align |
Alignment of column text - 'left', 'right', or 'center'. Default is left. |
<MM:TREECOLUMN align="center"> |
state |
State of the column- "visible" or "hidden". |
<MM:TREECOLUMN state="visible"> |
TREECOLUMN
tags should appear at the top of the TreeControl declaration, such as:
<MM:TREECONTROL name="tree1"> <MM:TREECOLUMN name="Column1" width="100" state="visible"> <MM:TREECOLUMN name="Column2" width="80" state="visible"> ... </MM:TREECONTROL>
Note: TREECOLUMN
tags can technically appear anywhere in the TREECONTROL
tag, but should be placed at the top for readability.
MM:TREENODE The MM:TREENODE
tag specifies an individual node within an MM:TREECONTROL
. It is a non-empty tag and may contain only other MM:TREENODE
tags.
The MM:TREENODE
tag may not contain raw text, even though it is non-empty. The only valid content for an MM:TREENODE
tag is zero or more MM:TREENODE
tags.
The MM:TREENODE
attributes are:
Attribute Name | Description | Sample |
---|---|---|
name |
Name of the TREENODE tag. |
<MM:TREENODE name="node1"> </MM:TREENODE> |
value |
Contains the content for the given node. For more than one column, this will be a pipe-delimited string. To specify an empty column, place a single space character before the pipe. |
<MM:TREENODE value="Lawnmower|129.95"> </MM:TREENODE> // EMPTY COL EXAMPLE: <MM:TREENODE value="Data| |"> </MM:TREENODE> |
state |
State of the node - "expanded" or "collapsed" . |
<MM:TREENODE state="expanded"> </MM:TREENODE> |
selected |
True if the node is currently selected. You can select multiple nodes by setting this attribute on more than one tree node, if the tree has a MULTIPLE attribute. |
<MM:TREENODE selected> </MM:TREENODE> |
icon |
Integer index of built-in icon to use, starting with 0. The built-in icons are 0 = no icon 1 = DW document icon 2 = multi-document icon 3 = folder 4 = image document 5 = green check 6 = red X 7 = question mark 8 = note icon 9 = warning icon 10 = stop icon |
<MM:TREENODE icon='1'> </MM:TREENODE> |
A typical set of tree control code might look like:
<MM:TREECONTROL name="CtrlName" [size=N] [style="[width:#px];[height:#px]"]> <MM:TREECOLUMN name="Column1" value="Items"> <MM:TREENODE value="Item1" selected></MM:TREENODE> <MM:TREENODE value="Item2|Item3" expanded> <MM:TREENODE value="Item4|Item5"></MM:TREENODE> </MM:TREENODE> </MM:TREECONTROL>
![]() ![]() ![]() |